<template>
  <div class="security-page">
    <!-- Page Header -->
    <div class="page-header">
      <h1>Security</h1>
      <div class="header-actions">
        <button class="btn primary">
          <i class="mdi mdi-shield-refresh"></i> Refresh Security
        </button>
      </div>
    </div>

    <!-- Security Summary -->
    <div class="security-summary">
      <div class="summary-card">
        <div class="summary-icon">
          <i class="mdi mdi-shield-check"></i>
        </div>
        <div class="summary-content">
          <h2>Your account security is strong</h2>
          <p>All recommended security options are turned on</p>
        </div>
        <div class="summary-score">
          <div class="score-circle">95%</div>
          <span>Security score</span>
        </div>
      </div>
    </div>

    <!-- Security Recommendations -->
    <div class="security-recommendations">
      <h2 class="section-title">
        <i class="mdi mdi-lightbulb-on-outline"></i> Recommendations
      </h2>
      <div class="recommendations-grid">
        <div class="recommendation-card">
          <div class="recommendation-header">
            <i class="mdi mdi-cellphone-key"></i>
            <h3>Set up two-step verification</h3>
          </div>
          <p>Add an extra layer of security to your account</p>
          <div class="recommendation-status">
            <span class="status-badge completed">Completed</span>
            <button class="btn text">Manage</button>
          </div>
        </div>

        <div class="recommendation-card">
          <div class="recommendation-header">
            <i class="mdi mdi-email-alert"></i>
            <h3>Update recovery email</h3>
          </div>
          <p>Make sure we can reach you if there's unusual activity</p>
          <div class="recommendation-status">
            <span class="status-badge completed">Completed</span>
            <button class="btn text">Update</button>
          </div>
        </div>

        <div class="recommendation-card">
          <div class="recommendation-header">
            <i class="mdi mdi-key-chain"></i>
            <h3>Change password</h3>
          </div>
          <p>It's been 90 days since you last changed your password</p>
          <div class="recommendation-status">
            <span class="status-badge action-needed">Action needed</span>
            <button class="btn text">Change</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Security Settings -->
    <div class="security-settings">
      <h2 class="section-title">
        <i class="mdi mdi-cog-outline"></i> Security Settings
      </h2>

      <div class="settings-accordion">
        <div class="accordion-item" v-for="(item, index) in securityItems" :key="index">
          <div class="accordion-header" @click="toggleAccordion(index)">
            <div class="header-content">
              <i :class="item.icon"></i>
              <h3>{{ item.title  }}</h3>
              <span class="status-badge" :class="item.statusClass">{{  item.statusText  }}</span>
            </div>
            <i class="mdi" :class="item.expanded  ? 'mdi-chevron-up' : 'mdi-chevron-down'"></i>
          </div>
          <div class="accordion-content" v-if="item.expanded">
            <p>{{ item.description  }}</p>
            <div class="accordion-actions">
              <button class="btn" :class="item.primaryAction.class">
                {{ item.primaryAction.text  }}
              </button>
              <button class="btn text" v-if="item.secondaryAction">
                {{ item.secondaryAction.text  }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Recent Activity -->
    <div class="recent-activity">
      <h2 class="section-title">
        <i class="mdi mdi-history"></i> Recent Security Activity
      </h2>
      <div class="activity-timeline">
        <div class="timeline-item" v-for="(event, index) in securityEvents" :key="index">
          <div class="timeline-marker" :class="event.type"></div>
          <div class="timeline-content">
            <h3>{{ event.title  }}</h3>
            <p>{{ event.description  }}</p>
            <div class="timeline-meta">
              <span>{{ event.location  }}</span>
              <span>{{ event.time  }}</span>
              <span>{{ event.device  }}</span>
            </div>
          </div>
        </div>
      </div>
      <button class="btn text">View all activity</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const securityItems = ref([
  {
    icon: 'mdi-cellphone-key',
    title: 'Two-step verification',
    statusText: 'On',
    statusClass: 'completed',
    description: 'Two-step verification helps protect your account by requiring a second form of authentication.',
    expanded: false,
    primaryAction: {
      text: 'Manage',
      class: 'primary'
    },
    secondaryAction: {
      text: 'Learn more'
    }
  },
  {
    icon: 'mdi-account-key',
    title: 'App passwords',
    statusText: 'Not set up',
    statusClass: 'action-needed',
    description: 'App passwords let you sign in to apps that don\'t support two-step verification.',
    expanded: false,
    primaryAction: {
      text: 'Create new',
      class: 'primary'
    }
  },
  {
    icon: 'mdi-shield-account',
    title: 'Advanced security options',
    statusText: 'Off',
    statusClass: 'action-needed',
    description: 'Additional security features to help keep your account safe.',
    expanded: false,
    primaryAction: {
      text: 'Turn on',
      class: 'primary'
    }
  },
  {
    icon: 'mdi-devices',
    title: 'Trusted devices',
    statusText: '2 devices',
    statusClass: 'completed',
    description: 'Devices you\'ve marked as trusted won\'t require two-step verification each time you sign in.',
    expanded: false,
    primaryAction: {
      text: 'Manage devices',
      class: 'primary'
    }
  }
])

const securityEvents = ref([
  {
    type: 'success',
    title: 'Successful login',
    description: 'You signed in to your Minecraft account',
    location: 'United States',
    time: '2 hours ago',
    device: 'Windows 11 · Chrome'
  },
  {
    type: 'info',
    title: 'Password changed',
    description: 'Your account password was updated',
    location: 'United States',
    time: '1 week ago',
    device: 'Windows 11 · Chrome'
  },
  {
    type: 'warning',
    title: 'Unusual sign-in attempt',
    description: 'Someone tried to sign in with your username',
    location: 'Germany',
    time: '2 weeks ago',
    device: 'iOS · Safari'
  }
])

const toggleAccordion = (index) => {
  securityItems.value[index].expanded  = !securityItems.value[index].expanded
}
</script>

<style scoped>
.security-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
}

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn.primary  {
  background-color: var(--accent);
  color: white;
}

.btn.primary:hover  {
  background-color: var(--accent-dark);
}

.btn.text  {
  background: transparent;
  color: var(--accent);
}

.btn.text:hover  {
  background: rgba(0, 0, 0, 0.05);
}

.security-summary {
  margin-bottom: 40px;
}

.summary-card {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 24px;
  gap: 24px;
}

.summary-icon {
  font-size: 32px;
  color: var(--accent);
}

.summary-content h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.summary-content p {
  color: var(--text-secondary);
}

.summary-score {
  margin-left: auto;
  text-align: center;
}

.score-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin: 0 auto 4px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.section-title i {
  color: var(--accent);
}

.security-recommendations {
  margin-bottom: 40px;
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.recommendation-card {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 16px;
}

.recommendation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.recommendation-header i {
  font-size: 24px;
  color: var(--accent);
}

.recommendation-header h3 {
  font-size: 16px;
  font-weight: 500;
}

.recommendation-card p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 16px;
}

.recommendation-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.status-badge.completed  {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.status-badge.action-needed  {
  background: rgba(234, 88, 12, 0.1);
  color: #ea580c;
}

.security-settings {
  margin-bottom: 40px;
}

.settings-accordion {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--border);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  background: var(--bg-secondary);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-content i {
  font-size: 20px;
  color: var(--accent);
}

.header-content h3 {
  font-size: 16px;
  font-weight: 500;
}

.accordion-content {
  padding: 16px;
  background: var(--bg-primary);
}

.accordion-content p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-size: 14px;
}

.accordion-actions {
  display: flex;
  gap: 8px;
}

.recent-activity {
  margin-bottom: 40px;
}

.activity-timeline {
  border-left: 2px solid var(--border);
  margin-left: 16px;
  padding-left: 24px;
  margin-bottom: 16px;
}

.timeline-item {
  position: relative;
  padding-bottom: 24px;
}

.timeline-marker {
  position: absolute;
  left: -27px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
}

.timeline-marker.success  {
  background: #10b981;
}

.timeline-marker.info  {
  background: #3b82f6;
}

.timeline-marker.warning  {
  background: #f59e0b;
}

.timeline-content {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 16px;
}

.timeline-content h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.timeline-content p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}

.timeline-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .summary-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .summary-score {
    margin-left: 0;
    margin-top: 16px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .timeline-meta {
    flex-wrap: wrap;
  }
}
</style>